
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<%@page import="tuSecure.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.List" %>
<%@ page import="javax.jdo.PersistenceManager" %>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.google.appengine.api.users.UserService" %>
<%@ page import="com.google.appengine.api.users.UserServiceFactory" %>
<%@ page import="tuSecure.Message" %>
<%@ page import="tuSecure.PMF" %>

  <head> 
  
	<%
		String name="work";
		double lat=0.0;
		double longt=0.0;
		String emergency="";
		int type;
		
		PersistenceManager pm = PMF.get().getPersistenceManager();
	    String query = "select from " + Message.class.getName();
	    List<Message> msgs = (List<Message>) pm.newQuery(query).execute();
		int size = msgs.size();
	    
	    pm.close();

	%>
  
  
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Basic Example</title> 
	 <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAmwJwPrpMgJ_kDK4GTq40mhS6fQ8TiRzni-H4JZ5YhXMfHctOpxQDKHbJDX4Bp6IaRx0cG1LDwn2DQg"
      type="text/javascript"></script>
    <script type="text/javascript" src="http://static.simile.mit.edu/timeline/api/timeline-api.js"></script>
    <script src="../timemap.js" type="text/javascript"></script>
        <script type="text/javascript">

var tm;
function onLoad() {

    tm = TimeMap.init({
        mapId: "map",               // Id of map div element (required)
        timelineId: "timeline",     // Id of timeline div element (required)
        options: {
            eventIconPath: "../images/"
        },
        datasets: [
            {
                id: "message",
                title: "Messages",
                theme: "orange",
                // note that the lines below are now the preferred syntax
                type: "basic",
                options: {
                    items: [
                    <%
                    for(int i=0;i<size;i++)
                    {
                    	name = ( msgs.get(i) ).getName();
						lat =( msgs.get(i) ).getLattitude();
						longt = ( msgs.get(i) ).getLongitude();
						emergency = ( msgs.get(i) ).getEmergency();
                    %>
                        {
                          "start" : "1449",
                          "end" : "1494-01-11",
                          "point" : {
                              "lat" : <%out.print(lat);%>,
                              "lon" :  <%out.print(longt);%>
                           },
                          "title" : "<%out.print(name);%>",
                          "options" : {
                            // set the full HTML for the info window
                            "infoHtml": "<div class='custominfostyle'><b><%out.print(name);%></b> Message:<%out.print(emergency);%>(</div>"
                          }
                        }<% if(i!=size-1)out.print(",");//only add comma if not last set%>
                     <%
                     
                     }//end for loop
                     
                     %>   
                    ]
                }
            }
        ],
        bandIntervals: [
            Timeline.DateTime.DECADE, 
            Timeline.DateTime.CENTURY
        ]
    });
    // manipulate the timemap further here if you like
}
    </script>
        <link href="examples.css" type="text/css" rel="stylesheet"/>
    <style>
    div#timelinecontainer{ height: 300px; }
    div#mapcontainer{ height: 300px; }
    </style>
  </head>

  <body onload="onLoad();" onunload="GUnload();">
    <div id="help">
    <h1>Simplest Dataset Ever</h1>
    In this example, we're just directly entering the data in the javascript, loading content into the info window in several different ways. (Note that Leonardo's window, which loads content via AJAX, may throw an error in IE if you're viewing this locally, due to cross-site scripting restrictions.)
    </div>
    <div id="timemap">
        <div id="timelinecontainer">
          <div id="timeline"></div>
        </div>
        <div id="mapcontainer">
          <div id="map"></div>
        </div>
    </div>
  </body>
</html>
